<template>
<view>
<!-- calendar/calendar.wxml -->
<view class="calendar">
  <view class="top-component">
    <calendar @afterCalendarRender="afterCalendarRender" :calendarConfig="calendarConfig" @changeHeader="changeHeader" @clickDate="clickDate"></calendar>
  </view>
  <view class="bottom-component">
    <view class="explain flex">
      <view class="explain-item flex">
        <view class="has-remind flex">
          <view class="circular color-ff6600"></view>
          <view class="explain-text">有提醒</view>
        </view>
        <view class="has-remind flex">
          <view class="circular color-3d99d6"></view>
          <view class="explain-text">当前日期</view>
        </view>
        <view class="has-remind flex">
          <view class="circular color-84C6F2"></view>
          <view class="explain-text">选中日期</view>
        </view>
      </view>
      <view class="interactive flex">
        <view>（前往添加）</view>
        <navigator hover-class="btn" url="../list/list">
          <button hover-class="btn">我的办事提醒</button>
        </navigator>
      </view>
    </view>
    <view class="remind">
      <view class="remind-title">
        <image src="/static/images/tools/calendar-line.png" class="title-line"></image>
        <text>当日提醒</text>
      </view>
      <view v-if="desc.length > 0" class="remind-list">
        <text v-for="(item, index) in desc" :key="index" class="remind-name">{{item.name}}   已完成</text>
      </view>
      <view class="remind-content-no" v-else>暂无</view>
    </view>
    <view class="matter remind">
      <view class="remind-title">
        <image src="/static/images/tools/calendar-line.png" class="title-line"></image>
        <text>当日事项</text>
      </view>
      <view class="remind-content" v-if="matter.length > 0">
        <view v-for="(item, index) in matter" :key="index" class="list" @tap="matterNavi" :data-id="item.id">
          {{item.title}}
          <image src="/static/images/sys/right.png"></image>
        </view>
      </view>
      <view class="remind-content-no" v-else>暂无</view>
    </view>
  </view>
</view>
<view class="float" v-if="showImg">
  <image :src="src" class="month-img" mode="aspectFit"></image>
  <button @tap="floatControl" class="float-control">好的</button>
</view>
</view>
</template>

<script>
// calendar/calendar.js
const util = require("../../../../utils/util.js");
const app = getApp();
let reminds = [];
const localpath = "../pages/index/";
let toggleCollection = true;
import calendar from "../../../../component/wx_calendar/calendar/index";

export default {
  data() {
    return {
      calendarConfig: {
        defaultDay: false,
        highlightToday: true,
        inverse: true,
        onlyShowCurrentMonth: true
      },
      matter: [],
      desc: [],
      src: "",
      showImg: false,
      scroll: false
    };
  },

  components: {
    calendar
  },
  props: {},

  onLoad() {
    // util.colleation(this, "办事提醒日历");
    toggleCollection = true;
  },

  onShareAppMessage: function () {
    return {
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  methods: {
    afterCalendarRender() {
      util.getUrl(app.globalData.url).then(res => {
        // util.login().then(res => {
        const $getIndexInfo = {
          ac: "login",
          citycode: uni.getStorageSync("citycode"),
          openid: uni.getStorageSync("openid")
        };
        util.bstrequest('calendar.php', $getIndexInfo, "POST").then(res => {
          try {
            let remind = JSON.parse(JSON.stringify(res.data.data));
            if (remind.remind) this.initRemind(remind.remind);

            if (remind.matter) {
              this.matter = remind.matter.filter(v => {
                v.markdate = util.formatTime(new Date(parseInt(v.markdate) * 1000)).split(" ")[0].split("/").join("-");
                return v.markdate === util.formatTime(new Date()).split(" ")[0].split("/").join("-");
              });
              this.setData({
                matter: this.matter
              });
            }

            if (remind.month) {
              if (remind.month.pic) {
                this.setData({
                  src: remind.month.pic,
                  showImg: true
                });
              }
            }
          } catch (e) {}
        }); // });
      });
    },

    initRemind(remind) {
      let days = [];
      reminds = remind;
      remind.forEach(v => {
        let date = v.endDay.split("-");
        days.push({
          year: date[0],
          month: date[1],
          day: date[2]
        });
        if (v.endDay === util.formatTime(new Date()).split(" ")[0].split("/").join("-")) this.desc.push(v);
      });
      this.calendar.setTodoLabels({
        pos: "top",
        dotColor: '#ff6600',
        circle: false,
        showLabelAlways: true,
        days
      });
      this.setData({
        desc: this.desc
      });
    },

    // 选择日期
    clickDate(e) {
      if (this.calendar.getSelectedDay()[0]) {
        let nowDate = this.calendar.getSelectedDay()[0];
        let appointday = `${nowDate.year}-${util.formatNumber(nowDate.month)}-${util.formatNumber(nowDate.day)}`;
        this.desc = reminds.filter(v => v.endDay === appointday);
        this.setData({
          desc: this.desc
        });
        let getNowDateinfo = {
          ac: "everyday",
          citycode: uni.getStorageSync("citycode"),
          openid: uni.getStorageSync("openid"),
          appointday
        };
        util.bstrequest('calendar.php', getNowDateinfo, "POST").then(res => {
          let matter;
          if (res.data.state === 1) matter = JSON.parse(JSON.stringify(res.data.data.matter));else matter = [];
          this.setData({
            matter
          });
        });
      }
    },

    // 切换年月
    changeHeader(e) {
      let year = this.calendar.getCurrentYM().year;
      let month = this.calendar.getCurrentYM().month;
      let $getNowMonthInfo = {
        ac: "month",
        openid: uni.getStorageSync("openid"),
        month,
        year
      };
      util.bstrequest('calendar.php', $getNowMonthInfo, "POST").then(res => {
        if (res.data.state === 1) this.initRemind(res.data.data.remind);
      });
    },

    matterNavi(e) {
      let id = e.currentTarget.dataset.id;
      let data = this.matter.filter(v => v.id === id)[0];
      util.click2NextProgram(data, "remind", localpath);
    },

    floatControl() {
      this.setData({
        showImg: false
      });
    },

    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    }

  }
};
</script>
<style>
/* calendar/calendar.wxss */

page {
	background-color: #f9f9f9;
	padding: 0 24rpx;
	box-sizing: border-box;
}

.btn {
	background-color: #ff6600;
}

button {
	height: 52rpx;
	padding: 0 14rpx;
	line-height: 52rpx;
	font-size: 22rpx;
	color: #ffffff;
	background-color: #FF6600;
	opacity: .6;
}

.flex {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.top-component {
	margin-bottom: 30rpx;
}

.explain {
	padding: 24rpx 22rpx;
	background-color: #ffffff;
}

.has-remind {
	margin-right: 18rpx;
}

.explain-text {
	margin-left: 6rpx;
	font-size: 20rpx;
	color: #232323;
}

.circular {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
}

.interactive {
	font-size: 20rpx;
	color: #B4B4B4;
}

.remind {
	margin-top: 16rpx;
	padding: 16rpx 24rpx;
	background-color: #ffffff;
	font-size: 28rpx;
	color: #232323;
}

.remind-title {
	margin-bottom: 20rpx;
	font-size: 22rpx;
	color: #6E6E6E;
}

.title-line {
	width: 6rpx;
	height: 20rpx;
	margin-right: 6rpx;
}

.remind-content-has {
	display: flex;
	justify-content: space-between;
}

.remind-type {
	font-size: 42rpx;
	color: #C8C8C8;
}

.list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 35rpx;
	font-size: 28rpx;
}

.list image {
	width: 14rpx;
	height: 25rpx;
}

.remind-list {
	display: flex;
	flex-direction: column;
}

.float {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.71);
}

.month-img {
	width: 562rpx;
	height: 766rpx;
	margin-top: 41rpx;
}
.float-control {
	width: 196rpx;
	height: 86rpx;
	background-color: transparent;
	line-height: 82rpx;
	color: #ffffff;
	font-size: 42rpx;
	border: 2rpx solid #ffffff;
	border-radius: 56rpx;
	margin-top: 54rpx;

}

.color-ff6600 {
	background-color: #ff6600;
}

.color-3d99d6 {
	background-color: #3d99d6;
}

.color-84C6F2 {
	width: 16rpx;
	height: 16rpx;
	/* background-color: #84C6F2; */
	border: 2rpx solid #84C6F2;
}
</style>